import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { withRouter } from 'react-router-dom';
import { Icon, tools, Flex, Badge, List, Tabs, ActivityIndicator } from "weaver-mobile";
import { ListPage } from "weaver-mobile-page";
import SearchConponent from "../common/SearchConponent";
import NoDataComponent from "../common/NoDataComponent";
import * as allFun from "../../../workflowForm/util/forwardPage";

const { getLabel } = tools;
const Item = List.Item;

@withRouter
@inject("docCenterStore")
@inject("docLibraryStore")
@inject("docTodoStore")
@observer
class DocCenter extends Component {

  static defaultProps = {
    prefixCls: "odoc-center"
  }

  componentDidMount() {
    const { docCenterStore, docLibraryStore, docTodoStore } = this.props;
    docCenterStore.getlibraryList();
    docCenterStore.getCenterTab();
    docCenterStore.getTodoList();
    docCenterStore.getHotTheme()
    docCenterStore.getTodoTabs();
    docLibraryStore.getTabs();//提前获取公文库的tabs，为跳转做准备
    docTodoStore.getTabs(); //提前获取待办的tabs 为跳转做准备
    docCenterStore.getUserId();
  }

  render() {
    const { docCenterStore, location: { pathname }, prefixCls, history } = this.props
    const { tabsData, hotThemeList, tabs, changeTab, libraryLoading, todoLoading } = docCenterStore
    return (
      <div className={`${prefixCls}`}>
        <SearchConponent
          getCondition={{
            url: "/api/odoc/odocDoclib/getCondition",
          }}// 高级搜索form表单接口参数  默认是 没有url，post，没有参数
          pathname={pathname} //源路径
          extraButton={["advanced"]}
          getSearchData={formParams => this.getSearchData(formParams)}
          title={getLabel('503576', '请输入公文标题')}
          baseSearchKey={"odocSubject"}
          history={history}
          forward
        />

        <Flex className={`${prefixCls}-flexBar`}>
          {
            tabsData.map(item =>
              <Flex.Item style={{ textAlign: "center" }} key={item.key} onClick={() => this.goToLibrary(item.key)}>
                <Badge text={item.count} style={{ marginLeft: "17px" }}>
                  <div className={`${prefixCls}-flexBar-item`} style={item.style}>
                    <Icon type={item.icon} />
                  </div>
                  <div style={{ marginTop: "5px" }}>{item.title}</div>
                </Badge>
              </Flex.Item>
            )
          }
        </Flex>

        <div className={`${prefixCls}-mainContent`}>

          {this.getSubTitle("library")}
          <List>
            {libraryLoading && <ActivityIndicator text="Loading..." />}
            {!libraryLoading && this.getLibraryTableList()}
          </List>

          {this.getSubTitle("todo")}
          <div className={`${prefixCls}-todo`}>
            <Tabs
              tabs={tabs}
              onChange={(tab, index) => changeTab(tab, index)}
            />
            <List>
              {todoLoading && <ActivityIndicator text="Loading..." />}
              {!todoLoading && this.getTodoList()}
            </List>
          </div>

          {this.getSubTitle("theme")}

          <div className={`hotTheme`}>
            <List className="my-list">
              {
                hotThemeList.map((item, index) => {
                  if (index > 4) {
                    return
                  }
                  let classname = "hotThemeBottom";
                  if (index < 3) {
                    classname = "hotThemeTop"
                  }
                  return (
                    <div key={index} onClick={() => this.getSearchData({ topictype: "1", odocTopicType: item.topictype })}>
                      <span className={classname}>{(index + 1)}</span>
                      <Item extra={item.count} key={index}>{item.showname}</Item>
                    </div>
                  )
                })
              }
            </List>
          </div>
        </div>
      </div>

    )
  }

  getLibraryTableList = () => {
    const { docCenterStore, prefixCls } = this.props;
    const { libraryList } = docCenterStore;
    const data = libraryList.data.map((item, i) => {
      return ({
        title: item.idspan,
        id: item.id,
        time: item.written_datespan,
        user: item.issued_useridspan,
        img: item.picture_idspan,
      })
    });
    if (data.length == 0) {
      return <NoDataComponent />
    }
    return data.map((d, i) => (
      <ListPage.Item
        className={`${prefixCls}-table`}
        key={i}
        data={d}
        showCheck={false}
        template={this.getlibraryTemplate()}
        onClick={(rowData) => this.forwardToDoc(rowData)}
      />
    ))
  }

  getlibraryTemplate = () => {
    const template = {
      default: [
        {
          key: 'col1',
          style: { flex: 'none' },
          render(item) {
            if (item.img == "icon-document-word") {
              return <Icon type="word" style={{ color: '#716BFF', marginRight: '10px' }} />;
            } else {
              return <Icon type="pdf" style={{ color: '#df4430', marginRight: '10px' }} />;
            }
          },
        },
        {
          key: 'col2',
          configs: [
            { key: 'row1', configs: [{ key: 'title' }] },
            { key: 'row2', configs: [{ key: 'time' }] },
          ],
        },
      ],
    };
    return template;
  }

  getTodoList = () => {
    const { docCenterStore, prefixCls } = this.props;
    const { todoList } = docCenterStore;
    const data = todoList.data.map((item, i) => {
      return ({
        odoctype: item.odoctypespan,
        title: item.requestnamespan,
        creater: item.createrspan,
        time: item.createdatespan,
        id: item.requestid,
        viewtype: item.viewtype,
        userid:item.userid
      })
    });
    if (data.length == 0) {
      return <NoDataComponent />
    }
    return data.map((d, i) => (
      <ListPage.Item
        className={`${prefixCls}-table`}
        key={i}
        data={d}
        showCheck={false}
        template={this.getTodoTemplate()}
        onClick={(rowData) => this.forwardPage(rowData)}
      />
    ))
  }

  getTodoTemplate = () => {
    const template = {
      default: [
        // {
        //   key: 'col1',
        //   style: { flex: 'none' },
        //   render(item) {
        //     return <div className={`odoc-todo-table-item`}>{item.odoctype}</div> ;
        //   },
        // },
        {
          key: 'col2',
          configs: [
            // { key: 'row1', configs: [{ key: 'title' }],className:"xxx" }, 
            {
              key: 'row1',
              render(item) {
                return (
                  <div className={`wm-list-page-item-row-span wm-list-page-item-row-span-text-highlight`}>
                    {item.title}
                    {item.viewtype === '0' && <span className="redDot"></span>}
                    {item.viewtype === '1' && <span className="yellowDot"></span>}
                  </div>
                )
              },
            },
            { key: 'row2', configs: [{ key: 'creater', style: { marginRight: '10px' } }, { key: 'time' }], },
          ],
        },
      ],
    };
    return template;
  }

  getSubTitle = (type) => {
    const { prefixCls } = this.props;
    let func = () => this.goToTodo();
    let title = getLabel(384728, "待办公文")
    let iconType = "waiting-office"
    let color = "#4ecbcd"
    if (type == "library") {

      title = getLabel(500696, "公文库");
      func = () => this.goToLibrary("more");
      iconType = "shangban";
      color = "#55b1f9"
    } else if (type == "theme") {

      title = getLabel(500963, "热点主题");
      func = () => this.goToLibrary("more");
      iconType = "hot";
      color = "#fa7157"
    }
    const subTitle = (
      <div className={`${prefixCls}-docTodo`}>
        <div className={`${prefixCls}-docTodo-title`}>
          <Icon type={iconType} className={`${prefixCls}-docTodo-title-todoIcon`} style={{ color: color }} />
          {title}
        </div>

        <span className={`${prefixCls}-docTodo-more`} onClick={func}>
          {getLabel(17499, "更多")}
          <Icon type={"arrow-down-o"} className={`${prefixCls}-moreIcon`} />
        </span>

      </div>
    )
    return subTitle;
  }

  goToLibrary = (key) => {
    const { history } = this.props
    history.push({
      pathname: '/docLibrary',
      query: { selectKey: key },
    })
  }

  goToTodo = () => {
    const { history, docCenterStore } = this.props
    history.push({
      pathname: '/docTodo',
      query: { officalType: docCenterStore.officalType },
    })
  }


  getSearchData = (formParams) => {
    const { history } = this.props;
    history.push({
      pathname: '/docLibrary',
      query: { formParams: formParams },
    })
  }


  forwardPage = (rowData) => {
    const { docCenterStore } = this.props;
    allFun.forwardViewForm('requestid=' + rowData.id + '&f_weaver_belongto_userid=' + rowData.userid, (arg) => {
      docCenterStore.getTodoList();
    }, "portal")
  }

  forwardToDoc(rowData) {
    window.openLink.openDocument(rowData.id);
  }


}

export default DocCenter;